---
title: Docusaurusからの移行
description: DocusaurusプロジェクトをAstroに移行するためのガイド
sidebar:
  label: Docusaurus
type: migration
stub: true
framework: Docusaurus
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { CardGrid, LinkCard } from '@astrojs/starlight/components';

[Docusaurus](https://docusaurus.io)はReact製の人気ドキュメントサイトビルダーです。

## DocusaurusとAstroの類似点

DocusaurusとAstroには、プロジェクト移行を容易にするいくつかの共通点があります。

- どちらもJavaScriptベースのモダンなサイトビルダー（Jamstack）であり、[コンテンツ駆動](/ja/concepts/why-astro/#コンテンツ駆動)なウェブサイト―とくにドキュメントサイト―を構築するために最適化されています。
- 両者とも[MDXページ](/ja/guides/markdown-content/)をサポートしています。既存の`.mdx`ファイルをAstroに持ち込んでそのまま使用できます。
- どちらも`src/pages`内に置いたMDXファイルに対して[ファイルベースルーティング](/ja/guides/routing/)を行い、自動でページルートを生成します。既存コンテンツや新規ページをAstroのディレクトリ構造に配置しても違和感は少ないでしょう。
- Astroには[Reactコンポーネントを利用する公式インテグレーション](/ja/guides/integrations-guide/react/)があります。AstroではReactファイルの拡張子を`.jsx`または`.tsx`にする**必要があります**。
- Astroは[NPMパッケージのインストール](/ja/guides/imports/#npm-packages)をサポートしており、多くのReact用パッケージもそのまま利用できます。既存のReactコンポーネントや依存関係をそのまま移行できる可能性もあります。
- [AstroのJSXライクな構文](/ja/basics/astro-components/#コンポーネントテンプレート)はReactに慣れていればすぐ理解できます。

## DocusaurusとAstroの主な相違点

DocusaurusサイトをAstroで再構築すると、次のような違いに気付くでしょう。

- DocusaurusはReactベースのシングルページアプリ(SPA)ですが、Astroサイトは[`.astro`コンポーネント](/ja/basics/astro-components/)で構成されたマルチページアプリです。必要に応じてReact、Preact、Vue.js、Svelte、SolidJS、AlpineJSを併用できるほか、生のHTMLテンプレートもサポートされます。
- Docusaurusにはドキュメントサイト向けの機能が組み込まれています。Astroではこれらを自前で実装するか、[公式ドキュメントテーマStarlight](https://starlight.astro.build)や[コミュニティ製ドキュメントテーマ](https://astro.build/themes?search=&categories%5B%5D=docs)を利用します。なお、Starlightは当サイト（Astro本家サイト）を元に開発されており、現在この公式サイトもStarlightを使って動作しています。
- DocusaurusはコンテンツをMDXで管理しますが、StarlightはデフォルトでMarkdown(`.md`)を使い、MDXはオプションです。必要であれば[AstroのMDXインテグレーション](/ja/guides/integrations-guide/mdx/)を追加して`.mdx`を併用できます。（Starlightには標準で含まれています。）

## DocusaurusサイトをAstroに変換する

DocusaurusドキュメントサイトをAstroへ移行するには、まず[Starlight公式スターターテンプレート](https://starlight.astro.build)を使用するか、[テーマショーケース](https://astro.build/themes?search=&categories%5B%5D=docs)でコミュニティ製ドキュメントテーマを探索してください。

`create astro`コマンドに`--template`を渡すと、公式スターターで新しいAstroプロジェクトを作成できます。また、[GitHub上の既存Astroリポジトリから新規プロジェクトを開始](/ja/install-and-setup/#cliウィザードからインストールする)することも可能です。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm create astro@latest -- --template starlight
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm create astro@latest --template starlight
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn create astro --template starlight
  ```
  </Fragment>
</PackageManagerTabs>

AstroのMDXインテグレーションはデフォルトで含まれているため、[既存のコンテンツファイルを直ちに追加](https://starlight.astro.build/getting-started/#コンテンツを追加)できます。

公式スターターおよび他のテンプレートは[astro.new](https://astro.new)で確認できます。各プロジェクトのGitHubリポジトリ、IDX・StackBlitz・CodeSandbox・Gitpodで開くワンクリックリンクも用意されています。

## コミュニティリソース

<CardGrid>
<LinkCard title="ドキュメントを10倍高速化 (Russian)" href="https://habr.com/ru/articles/880220/" />
</CardGrid>

:::note[リソースを共有したいですか？]
DocusaurusサイトをAstroに移行する際に役立つ動画やブログ記事をご存じ（またはご自身で作成）でしたら、こちらのリストに追加してください。  
[GitHub リポジトリを編集](https://github.com/withastro/docs/edit/main/src/content/docs/ja/guides/migrate-to-astro/from-docusaurus.mdx)！
:::
